import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import yhTools from "../../../tools/yh";
import { ThemeDefault, ThemeLife } from "../../../tools/theme";
import { InterfaceG } from "../../../config/Config";
import { Toast } from "antd-mobile";
import { Modal } from "antd-mobile";

import "./SignRes.scss";

export default class SignRes extends Component {
	constructor(props) {
		super(props);
		let msg = props.location.state ? props.location.state.msg : "";
		this.msg = msg;
		this.state = {
			loadStatus: "1",
			/** 还款页面进入，余额是否充足 1充足 0 不足 */
			enoughStatus: "1",
			/**是否显示支付密码框 */
			resVisible: false,
			/**状态  0-未签约 1-已签约 2-签约中*/
			signStatus: "1",
			/** 开通失败信息 */
			errMsg: msg,
			/**单日支付上线 */
			paymentDailyLimit: "",
			/**单笔支付上线 */
			paymentSingleLimit: ""
		};
		/** 界面类型 0是正常途径进入，1是还款进入*/
		this._pagetype = props.location.pathname.indexOf("xhb") === -1 ? 0 : 1;
	}

	/** 查询支付开通结果 */
	async queryXhbPaySignStatus() {
		// this.setState({resVisible:true});
		// return ;

		if (this.msg) {
			return this.setState({ resVisible: true, signStatus: "1" });
		}
		let enoughStatus = "1";
		if (this._pagetype) {
			enoughStatus = await this.getEnoughStatus();
		}
		let objs = {
			url: InterfaceG.queryXhbPaySignStatus,
			params: {},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		let res = await yhTools.request(objs);
		Toast.hide();
		if (res.code === "0") {
			let data = res.data;
			if (data) {
				this.setState({ ...data, enoughStatus, resVisible: true });
			}
		} else {
			Toast.info(res.message, 2);
		}
	}
	/** 小辉付充值进入的开户查询 */
	async getEnoughStatus() {
		let objs = {
			url: InterfaceG.xhfRepaymentByXhbInit,
			params: {
				repayAmout: this.props.match.params.amount
			},
			_alertShow: false
		};
		let res = await yhTools.request(objs);
		if (res.code === "0") {
			let data = res.data;
			if (data) {
				return data.enoughStatus;
			}
		} else {
			Toast.info(res.message, 2);
			return "1";
		}
	}
	/** 打电话 */
	callPhone(telphone) {
		let callPhoneData = {
			telphone
		};
		yhTools.callPhone(callPhoneData);
	}

	/** 跳转界面 */
	toPath(path) {
		this.props.history.push(path);
	}

	/** 开通失败之后的回退 */
	goBack() {
		/**
		 * 证明页面是支付签约失败返回的
		 */
		sessionStorage.setItem("signres_page", "1");
		this.props.history.goBack();
	}

	/** 返回首页 */
	goHome() {
		/**
		 * 如果是原生进入充值界面,index_fromType = app
		 * 返回键直接关闭page
		 */
		let index_fromType = sessionStorage.getItem("index_fromType");
		let flag = index_fromType && index_fromType === "app";
		if (flag) {
			yhTools.closePage();
		} else {
			this.props.history.push("/walletHome");
		}
	}

	render() {
		let headerParams = {
			header: {
				title: "开通结果",
				goToApp: false,
				goBackAction: () => this.toPath("/walletHome")
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};

		if (
			this.props.location.state &&
			this.props.location.state.form === "openAccountResult"
		) {
			headerParams.header.goBackPath = "/walletHome";
		}

		let { resVisible, signStatus } = this.state;

		return (
			<MainLayout pageParams={headerParams}>
				<div className="singRes">
					<div className="res">
						<img
							src={require("../../../images/imageXHB/singxhb-resing.png")}
							alt=""
						/>
						<p>小辉宝支付开通中</p>
						<span>您的支付开通申请在处理中，请耐心等待</span>
					</div>
					<ThemeDefault>
						<div className="btn" onClick={() => this.queryXhbPaySignStatus()}>
							查看最新结果
						</div>
					</ThemeDefault>
					<ThemeLife>
						<div
							className="btn a-gradient"
							onClick={() => this.queryXhbPaySignStatus()}
						>
							查看最新结果
						</div>
					</ThemeLife>
				</div>
				<Modal
					className="singRes-modal"
					visible={resVisible}
					transparent
					closable
					maskClosable={false}
					title="小辉宝支付开通结果"
					onClose={() => {
						this.setState({ resVisible: false });
					}}
				>
					<div className="singRes-content">
						{signStatus === "1" && (
							<>
								<img
									src={require("../../../images/imageXHB/signxhb-res-fail.png")}
									alt=""
								/>
								<p>开通失败</p>
								<span>失败原因：{this.state.errMsg}，您可以拨打银行客服电</span>
								<span>
									话
									<a
										href="javascript:;"
										onClick={() => this.callPhone("4008219666")}
									>
										400-8219-666
									</a>
									获得帮助。
								</span>

								<div
									className={ThemeLife.switch("lifebtn", "btn")}
									onClick={() => this.goBack()}
								>
									再试一次
								</div>
								{this._pagetype ? (
									<div
										className="bottombtn"
										onClick={() => this.props.history.goBack()}
									>
										更改还款方式
									</div>
								) : (
									<div
										className="bottombtn"
										onClick={() => this.props.history.push("/walletHome")}
									>
										返回首页
									</div>
								)}
							</>
						)}

						{signStatus === "0" && (
							<>
								<img
									src={require("../../../images/imageXHB/signxhb-res-suc.png")}
									alt=""
								/>
								<p>开通成功</p>
								<span>
									小辉宝单笔支付上限{this.state.paymentSingleLimit}元，{" "}
								</span>
								<span>单日支付上限{this.state.paymentDailyLimit}元。</span>
								{!this._pagetype && (
									<div
										className={ThemeLife.switch("lifebtn", "btn")}
										onClick={() => this.goHome()}
									>
										返回首页
									</div>
								)}
								{!!this._pagetype && this.state.enoughStatus === "1" && (
									<div
										className={ThemeLife.switch("lifebtn", "btn")}
										onClick={() => this.props.history.goBack()}
									>
										继续还款
									</div>
								)}

								{!!this._pagetype && this.state.enoughStatus === "0" && (
									<div
										className={ThemeLife.switch("lifebtn", "btn")}
										onClick={() => this.props.history.goBack()}
									>
										去充值
									</div>
								)}
								<div className="bottombtn"> </div>
							</>
						)}

						{signStatus === "2" && (
							<>
								<img
									src={require("../../../images/imageXHB/signxhb-res-ing.png")}
									alt=""
								/>
								<p>开通中</p>
								<span>您的小辉宝支付申请还在开通中，</span>
								<span>请耐心等待。</span>
								<div
									className={ThemeLife.switch("lifebtn", "btn")}
									onClick={() => this.setState({ resVisible: false })}
								>
									知道了
								</div>
								{this._pagetype ? (
									<div
										className="bottombtn"
										onClick={() => this.props.history.goBack()}
									>
										更改还款方式
									</div>
								) : (
									<div
										className="bottombtn"
										onClick={() => this.props.history.push("/walletHome")}
									>
										返回首页
									</div>
								)}
							</>
						)}
					</div>
				</Modal>
			</MainLayout>
		);
	}
}
